<template>
  <div class='search-container'
       :style='{bottom: contentBottom + "px"}'>
    <div class="search_wrap">
      <search-box ref='search'
                  @search='query = $event'
                  @submit="tosearch"></search-box>
    </div>
    <div class="main-a"
         v-show='!query'
         :style='{bottom: contentBottom + "px"}'>
      <div class="hot-key">
        <h1 class="title">热门搜索</h1>
        <ul>
          <li @click="addQuery(item.k)"
              class="item"
              v-for="item in hotKey"
              :key='item.k'>
            <span>{{item.k}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-b"
         v-show='query'
         :style='{bottom: contentBottom + "px"}'>
      <search-result :query='query'
                     ref='searchResult'></search-result>
    </div>
  </div>
</template>

<script>
import { playMiniMixin } from 'common/js/mixin'
import SearchBox from 'base/searchBox/searchBox'
import { getHotKey } from 'api/search'
import SearchResult from 'components/searchResult/search-result'
export default {
  mixins: [playMiniMixin],
  data () {
    return {
      hotKey: [],
      query: ''
    }
  },
  components: {
    SearchBox,
    SearchResult
  },
  methods: {
    async _getHotKey () {
      const res = await getHotKey()
      this.hotKey = res.data.hotkey
    },
    // 设置搜索项
    addQuery (query) {
      this.$refs.search.setQuery(query)
      this.$nextTick(() => {
        this.tosearch(query)
      })
    },
    tosearch (value) {
      console.log(value)
      this.$refs.searchResult._search()
    },
    refresh () {

    }
  },
  created () {
    this._getHotKey()
  }
}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
.search-container
  position fixed
  width 100%
  top 88px
  bottom 0
  .search_wrap
    margin 10px 20px
  .main-a, .main-b
    position fixed
    width 100%
    top 148px
    bottom 0
    .hot-key
      margin 0 20px 20px 20px
      height 156px
      overflow hidden
      .title
        margin-bottom 20px
        margin-top 20px
        font-size $font-size-medium
        color $color-text-l
      .item
        display inline-block
        padding 5px 10px
        margin 0 20px 10px 0
        border-radius 6px
        background $color-highlight-background
        font-size $font-size-medium
        color $color-text-d
</style>